<script setup>
import { ref, onMounted } from 'vue'

// 留言表单数据
const contactForm = ref({
  name: '',
  email: '',
  subject: '',
  message: ''
})

// 表单验证状态
const formErrors = ref({})

// 提交状态
const isSubmitting = ref(false)
const submitSuccess = ref(false)

// 常见问题
const faqs = [
  {
    question: '如何预约观看皮影戏演出？',
    answer: '您可以通过我们的官方网站、电话或微信公众号预约观看皮影戏演出。我们会定期在网站和公众号上发布演出信息和预约方式。'
  },
  {
    question: '可以参观皮影制作过程吗？',
    answer: '是的，我们定期组织皮影制作体验活动，您可以报名参加。此外，在一些大型文化活动中，我们也会展示皮影制作的过程。'
  },
  {
    question: '如何学习皮影雕刻技艺？',
    answer: '我们开设了皮影雕刻技艺培训班，由资深传承人授课。您可以关注我们的网站和公众号，了解最新的培训信息并报名参加。'
  },
  {
    question: '可以购买皮影作品作为纪念品吗？',
    answer: '当然可以！我们有专门的文创产品店，销售各种精美的皮影作品和文创产品。您也可以在我们的网站上购买。'
  },
  {
    question: '如何邀请皮影戏团进行商业演出？',
    answer: '如果您需要商业演出服务，请通过我们的联系方式与我们取得联系，我们会根据您的需求提供详细的演出方案和报价。'
  }
]

// 展开的FAQ索引
const expandedFaq = ref(null)

// 切换FAQ展开状态
const toggleFaq = (index) => {
  expandedFaq.value = expandedFaq.value === index ? null : index
}

// 表单验证
const validateForm = () => {
  formErrors.value = {}
  let isValid = true

  if (!contactForm.value.name.trim()) {
    formErrors.value.name = '请输入您的姓名'
    isValid = false
  }

  if (!contactForm.value.email.trim()) {
    formErrors.value.email = '请输入您的邮箱'
    isValid = false
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contactForm.value.email)) {
    formErrors.value.email = '请输入有效的邮箱地址'
    isValid = false
  }

  if (!contactForm.value.subject.trim()) {
    formErrors.value.subject = '请输入留言主题'
    isValid = false
  }

  if (!contactForm.value.message.trim()) {
    formErrors.value.message = '请输入留言内容'
    isValid = false
  }

  return isValid
}

// 提交留言
const submitContactForm = () => {
  if (!validateForm()) {
    return
  }

  isSubmitting.value = true

  // 模拟API请求
  setTimeout(() => {
    console.log('Contact form submitted:', contactForm.value)
    isSubmitting.value = false
    submitSuccess.value = true
    
    // 重置表单
    contactForm.value = {
      name: '',
      email: '',
      subject: '',
      message: ''
    }
    
    // 5秒后隐藏成功消息
    setTimeout(() => {
      submitSuccess.value = false
    }, 5000)
  }, 1500)
}

// 社交媒体链接
const socialLinks = [
  { name: '微信', icon: '💬', url: '#' },
  { name: '微博', icon: '📱', url: '#' },
  { name: '抖音', icon: '🎵', url: '#' },
  { name: 'B站', icon: '📺', url: '#' }
]
</script>

<template>
  <div class="contact-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">联系我们</h1>
      <p class="page-subtitle">与我们一起探索皮影艺术的魅力</p>
    </div>

    <!-- 联系方式 -->
    <section class="contact-info-section container">
      <div class="contact-info-content">
        <div class="info-text">
          <h2 class="section-title">联系方式</h2>
          <p class="contact-description">
            如果您对皮影艺术有任何疑问、建议或合作意向，欢迎通过以下方式与我们联系。我们的工作人员会尽快回复您。
          </p>
        </div>
        <div class="contact-details">
          <div class="contact-item">
            <div class="contact-icon">🏢</div>
            <div class="contact-text">
              <h3 class="contact-title">地址</h3>
              <p class="contact-value">北京市朝阳区东三环中路39号建外SOHO 2号楼1803室</p>
            </div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">📞</div>
            <div class="contact-text">
              <h3 class="contact-title">电话</h3>
              <p class="contact-value">010-12345678</p>
            </div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">✉️</div>
            <div class="contact-text">
              <h3 class="contact-title">邮箱</h3>
              <p class="contact-value">info@shadowplay.com</p>
            </div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">⏰</div>
            <div class="contact-text">
              <h3 class="contact-title">工作时间</h3>
              <p class="contact-value">周一至周日 9:00-18:00</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 留言表单 -->
    <section class="contact-form-section">
      <div class="container">
        <h2 class="section-title">给我们留言</h2>
        <div v-if="submitSuccess" class="success-message">
          <p>感谢您的留言！我们会尽快与您联系。</p>
        </div>
        <form @submit.prevent="submitContactForm" class="form-container" v-if="!submitSuccess">
          <div class="form-row">
            <div class="form-group">
              <label for="name">姓名 *</label>
              <input 
                type="text" 
                id="name" 
                v-model="contactForm.name"
                :class="{ 'error': formErrors.name }"
                placeholder="请输入您的姓名"
              />
              <span v-if="formErrors.name" class="error-message">{{ formErrors.name }}</span>
            </div>
            <div class="form-group">
              <label for="email">邮箱 *</label>
              <input 
                type="email" 
                id="email" 
                v-model="contactForm.email"
                :class="{ 'error': formErrors.email }"
                placeholder="请输入您的邮箱"
              />
              <span v-if="formErrors.email" class="error-message">{{ formErrors.email }}</span>
            </div>
          </div>
          <div class="form-group">
            <label for="subject">主题 *</label>
            <input 
              type="text" 
              id="subject" 
              v-model="contactForm.subject"
              :class="{ 'error': formErrors.subject }"
              placeholder="请输入留言主题"
            />
            <span v-if="formErrors.subject" class="error-message">{{ formErrors.subject }}</span>
          </div>
          <div class="form-group">
            <label for="message">留言内容 *</label>
            <textarea 
              id="message" 
              v-model="contactForm.message"
              :class="{ 'error': formErrors.message }"
              rows="6"
              placeholder="请输入您的留言内容"
            ></textarea>
            <span v-if="formErrors.message" class="error-message">{{ formErrors.message }}</span>
          </div>
          <button type="submit" class="submit-button" :disabled="isSubmitting">
            {{ isSubmitting ? '提交中...' : '提交留言' }}
          </button>
        </form>
      </div>
    </section>

    <!-- 常见问题 -->
    <section class="faq-section container">
      <h2 class="section-title">常见问题</h2>
      <div class="faq-container">
        <div v-for="(faq, index) in faqs" :key="index" class="faq-item">
          <div class="faq-question" @click="toggleFaq(index)">
            <h3 class="question-text">{{ faq.question }}</h3>
            <div class="faq-icon" :class="{ 'active': expandedFaq === index }">
              {{ expandedFaq === index ? '−' : '+' }}
            </div>
          </div>
          <div class="faq-answer" :class="{ 'active': expandedFaq === index }">
            <p>{{ faq.answer }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 社交媒体 -->
    <section class="social-section">
      <div class="container">
        <h2 class="section-title">关注我们</h2>
        <p class="social-description">
          关注我们的社交媒体账号，获取最新的皮影艺术资讯、演出信息和活动预告。
        </p>
        <div class="social-links">
          <a v-for="link in socialLinks" :key="link.name" :href="link.url" class="social-link" target="_blank">
            <span class="social-icon">{{ link.icon }}</span>
            <span class="social-name">{{ link.name }}</span>
          </a>
        </div>
      </div>
    </section>

    <!-- 地图位置 -->
    <section class="map-section container">
      <h2 class="section-title">我们的位置</h2>
      <div class="map-container">
        <!-- 这里使用占位图替代实际地图 -->
        <img src="https://picsum.photos/id/240/1200/500" alt="办公地址地图" class="map-image" />
      </div>
    </section>
  </div>
</template>

<style scoped>
/* 页面头部 */
.page-header {
  background-color: var(--color-secondary);
  color: white;
  text-align: center;
  padding: 3rem 2rem;
}

.page-title {
  font-size: 3rem;
  margin: 0 0 1rem 0;
  color: var(--color-accent);
  font-family: 'STZhongsong', serif;
}

.page-subtitle {
  font-size: 1.5rem;
  margin: 0;
  opacity: 0.9;
}

/* 通用容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--color-heading);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--color-primary);
}

/* 联系方式 */
.contact-info-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.contact-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: 2rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background-color: var(--color-background-soft);
  padding: 1.5rem;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.contact-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.contact-title {
  font-size: 1.2rem;
  color: var(--color-secondary);
  margin: 0 0 0.3rem 0;
}

.contact-value {
  color: var(--color-text-light);
  margin: 0;
}

/* 留言表单 */
.contact-form-section {
  background-color: var(--color-background-soft);
}

.success-message {
  background-color: #e8f5e9;
  color: #2e7d32;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.form-container {
  background-color: white;
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-group input.error,
.form-group textarea.error {
  border-color: #f44336;
}

.error-message {
  display: block;
  color: #f44336;
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.submit-button {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 1rem;
}

.submit-button:hover:not(:disabled) {
  background-color: var(--color-secondary);
}

.submit-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* 常见问题 */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: var(--color-background-soft);
}

.question-text {
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0;
  flex-grow: 1;
}

.faq-icon {
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: bold;
  transition: transform 0.3s ease;
}

.faq-icon.active {
  transform: rotate(0deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-answer.active {
  max-height: 500px;
  padding-bottom: 1.5rem;
}

.faq-answer p {
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0;
}

/* 社交媒体 */
.social-section {
  background-color: var(--color-background-soft);
}

.social-description {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 2rem;
  background-color: white;
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  color: var(--color-primary);
}

.social-icon {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
}

.social-name {
  font-size: 1.1rem;
  font-weight: 500;
}

/* 地图位置 */
.map-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.map-image {
  width: 100%;
  height: auto;
  display: block;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.2rem;
  }
  
  .page-subtitle {
    font-size: 1.2rem;
  }
  
  .contact-info-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .form-container {
    padding: 1.5rem;
  }
  
  .social-links {
    gap: 1.5rem;
  }
  
  .social-link {
    padding: 1.2rem 1.5rem;
  }
  
  .social-icon {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .social-links {
    flex-direction: column;
    align-items: center;
  }
  
  .social-link {
    width: 200px;
  }
}
</style>